<template>
  <el-dialog v-model="dialogFormVisible" @close="close" :title="title">
    <el-form :model="dialogFormData" ref="dialogForm">
      <el-form-item>
        <slot name="upload"></slot>
      </el-form-item>

      <el-form-item
        v-for="(v, k) in dialogFormData"
        :key="k"
        :label="v.label"
        :label-width="formLabelWidth"
        :prop="k + '.value'"
        :rules="{
          required: true,
          trigger: 'blur',
          message: v.label + '不能为空',
        }"
      >
        <el-input v-model="v.value" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm(dialogForm)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watchEffect, toRefs } from "vue";
//想法
//1.根据传入的数据，自动创建出form表单原生，默认使用input
//2.表单需要具备能够校验属性的功能
//3.表单通过和不通过，可以回调对应的方法
//4.控制显示隐藏的属性
//5.控制labelWidth的属性

//dialog使用说明
//属性：
//1.visible:Boolean
//2.dialogFormData:Object表单数据{name:{labei:"item的描述"，value:"对应的值"}}
//3.formLabelWidth:String label的宽度
//4.title:String dialog的标题

//事件
//validateSuccess点击确定按钮,表单校验通过之后触发，回传一个form的实例引用
//dialogCancel点击取消按钮触发的事件
//clised dialog被关闭的时候触发的事件
let props = defineProps({
  title: {
    type: String,
    default() {
      return "增加学员信息";
    },
  },
  //控制表单显示隐藏
  visible: {
    type: Boolean,
    default() {
      return false;
    },
  },
  //弹窗表单中的数据来源
  dialogFormData: {
    type: Object,
    default() {
      return {};
    },
  },
  formLabelWidth: {
    type: String,
    default() {
      return "140px";
    },
  },
});
// let dialogFormVisible = ref(props.visible);
let dialogFormVisible = ref(false);

//使用watchEffect侦听visible的变化
let { visible } = toRefs(props);
watchEffect(() => {
  dialogFormVisible.value = visible.value;
});

//声明表单校验通过后的回调
let emits = defineEmits(["validateSuccess", "dialogCancel", "closed"]);
//声明取消的方法
let cancel = () => {
  emits("dialogCancel");
};
//声明确定的方法
//声明一个ref引用dialog结构
let dialogForm = ref();
let confirm = (form) => {
  form.validate((valid) => {
    if (valid) {
      //表单校验通过
      emits("validateSuccess", dialogForm);
    } else {
      //表单校验不通过
    }
  });
};
//dialog被关闭的时候触发的事件
let close = () => {
  emits("closed");
};
</script>
